<template>
  <div class="myInfo">
    <div style="width: 100%; height: 50px">
      <h2 style="color: orange">个人信息</h2>
    </div>
    <div style="width: 120px; height: 120px; margin-left: 30%">
      <el-image :src="vals" class="image" width="100%" height="100%"></el-image>
    </div>
    <div style="width: 100%; height: 50px; margin-top: 30px">
      <span style="font-size: large; color: white">账号： {{ user.uid }} </span>
    </div>
    <div style="width: 100%; height: 50px">
      <span style="font-size: large; color: white">姓名： {{ user.username }} </span>
    </div>
    <div style="width: 100%; height: 50px">
      <span style="font-size: large; color: white">电话： {{ user.phone }} </span>
    </div>
    <div style="width: 100%; height: 50px">
      <span :style="s1">VIP会员: {{ vip }} </span>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import axios from 'axios';
const vals = ref('');
const user = reactive({ uid: '', username: '', phone: '', vid: '' });
const vip = ref('暂无会员');
const s1 = ref('font-size: large;color: white');
onMounted(() => {
  user.vid = JSON.parse(sessionStorage.getItem('vid'));
  user.uid = JSON.parse(sessionStorage.getItem('uid'));
  user.username = JSON.parse(sessionStorage.getItem('username'));
  user.phone = JSON.parse(sessionStorage.getItem('phone'));
  vals.value = require('@/assets/' + JSON.parse(sessionStorage.getItem('headSrc')));
  if (user.vid !== 0) {
    axios.get('api/vip/isVip/' + user.vid).then(res => {
      if (res.data === 'YES') {
        vip.value = '超级会员';
        s1.value = 'font-size: large;color: red';
      } else {
        vip.value = '已过期';
      }
    });
  }
});
</script>
<style lang="scss" scoped>
.myInfo {
  width: 90%;
  height: 420px;
  float: left;
  margin-left: 20px;
  margin-top: 50px;
  background-image: linear-gradient(to right, #434343 0%, black 100%);
}
</style>
